<template>
  <li
    class="
      lg:w-[200px]
      w-[100px]
      border border-solid border-red
      lg:h-[400px]
      h-[300px]
      rounded
      shadow
      flex flex-col
      pb-2
      overflow-hidden
    "
  >
    <div class="py-2 kid-red-bg text-white lg:text-lg text-sm">
      <slot name="title"></slot>
    </div>
    <div
      class="flex flex-col justify-around grow lg:text-sm text-xs text-gray-66"
    >
      <slot name="content"></slot>
    </div>
  </li>
</template>

<script>
export default {};
</script>

<style scoped>
.kid-red-bg {
  background: linear-gradient(163deg, #e43336 0%, #c41719 100%);
}
</style>